<template>
  <div class="props-item" style="min-height: 50px;">
    <div class="row justify-between">
      <div class="left">
        <q-chip dense color="primary" text-color="white" square>{{k}}</q-chip>
<!--        <span class="text-grey-6" style="font-size: 12px;">{{p.type.toString()}}</span>-->
      </div>
      <div class="right flex items-center">
        <q-btn v-if="p.extension" icon="extension" color="blue-grey-6" flat dense round size="sm" @click="openExtension"></q-btn>
        <q-btn icon="data_object" color="blue-grey-6" flat dense round size="sm" @click="openFuncEditor"></q-btn>
        <q-btn icon="cancel" color="blue-grey-6" flat dense round size="sm" @click="delete option[k]"></q-btn>
      </div>
    </div>
    <div style="padding-left: 5px;" class="text-grey-9">描述：{{p.desc_cn}}</div>
    <div style="padding-left: 5px;" class="q-py-sm">
      <q-select dense filled v-if="p.values?.length && calType(p, k) !== '@computed'" v-model="option[k]" :options="p.values"></q-select>
      <template v-else>
        <q-toggle class="q-pr-md" dense filled v-if="calType(p, k) === 'Boolean'" v-model="option[k]"></q-toggle>
        <q-input dense filled v-if="calType(p, k) === 'String'" v-model="option[k]"></q-input>
        <q-input dense filled v-if="calType(p, k) === 'Number'" v-model.number="option[k]" type="number"></q-input>
      </template>
    </div>
  </div>
</template>

<script setup>
import { type } from 'ramda'
import {ref} from "vue"
import {openDialog} from "../common/quasar.extend.js"
import FunctionCreator from '../FunctionCreator/index.vue'
import { kebabCaseToPascalCase } from '../common/util.js'

const props = defineProps({
  k: String,
  p: Object,
  option: Object
})

const typeMap = ref({})
function calType(p, key) {
  if(typeMap[key]) return typeMap[key]
  if(props.option.hasOwnProperty(key)) {
    if(props.option[key]['@computed']) {
      return '@computed'
    }else  {
      return type(props.option[key])
    }
  }else {
    if(type(p.type) === 'String') {
      return p.type
    }
    if(type(p.type) === 'Array') {
      return p.type[0]
    }
  }
}

function openFuncEditor() {
  let propName = 'on' + kebabCaseToPascalCase(props.k)
  const d = openDialog({
    title: '函数编辑器',
    component: FunctionCreator,
    cardProps: {
      style: { height: '70%', width: '800px'},
    },
    contentProps: {
      cfg: props.option[propName] || {}
    }
  }).onOk((e) => {
    props.option[propName] = e.contentRef.funcCfg
    d.hide()
  })
}
</script>

<style scoped>
.props-item {
  width: 100%;
}
</style>
